import React, { Component ,createRef} from 'react'
import Header from "../components/all/header";
import Footer from "../components/all/footer";
import {apilink} from "../api/apilink";

import { message, Button, Space ,Alert } from 'antd';
// import UserInput from  "../components/login/userInput"
import {SLogin} from "../styled/login"
import Password from 'antd/lib/input/Password';
export default class login extends Component {
    constructor(props){
        super(props)
        this.state={
            username:"",
            userpassword:""
        }
        this.inputUsername = React.createRef();
        this.inputPassword = React.createRef();

    }
    componentDidMount(){
        if(localStorage.getItem("username")&& localStorage.getItem("password")){
            this.setState({
                username: localStorage.getItem("username"),
                userpassword: localStorage.getItem("password")
            });
            this.inputUsername.current.value = localStorage.getItem("username");
            this.inputPassword.current.value = localStorage.getItem("password");
            console.log(localStorage.getItem(this.inputUsername.current))
            console.log(localStorage.getItem("username"))
        }
    }
    shuruInfo(userInfo,e){
        this.setState({
            [userInfo]:e.target.value
        },()=>{
            console.log(this.state.userpassword)
        })
    }
    //点击注册 发请求
    userLogin(){
        console.log("点击登录")
        if(this.state.username && this.state.userpassword){
                let usp = new URLSearchParams();
                usp.append("username",this.state.username);
                usp.append("password",this.state.userpassword)
                apilink("/api/login","post",usp).then((ok)=>{
                    console.log(ok)
                    // if(ok.data.split(",")[0] === "login_success"){
                if(ok.data.info === "login_success"){
                        message.success('登录成功');
                        // 存本地
                        sessionStorage.setItem("username",this.state.username);
                        sessionStorage.setItem("userId",ok.data.id);
                        // 选择记住密码存本地
                        if(this.refs.check.checked){
                            localStorage.setItem("username",this.state.username);
                            localStorage.setItem("password",this.state.userpassword)
                        }
                        //判断是管理员还是普通用户
                        console.log(ok.data.idcard)
                        if(Number(ok.data.idcard) === 0){
                            // 普通用户
                            this.props.history.push("/index");

                        }else if(Number(ok.data.idcard) === 1){
                            //管理员用户
                            sessionStorage.setItem("userIdcard",ok.data.idcard);
                            this.props.history.push("/admin")
                        }
                    }
                    if(ok.data === "login_null"){
                        message.error('用户名或密码错误');
                    }
                }).catch((err)=>{
                    console.log(err)
                })
           
        }else{
            message.warning('不能为空，请输入');
        }
    }
    //点击跳转到注册页面    
    jumpRouter(){
        this.props.history.push("/register")
    }
    //点击修改密码
    updataPassword(){
        this.props.history.push("/updataPassword")
    }

    render(){
        return (
            <div>
                <Header></Header>
                    {/* 登录 */}
                    <SLogin>
                    <div className="user">
                        <div className='title'>
                            <h1>我的账户</h1>
                            <h2>请在此管理您的个人资料</h2>
                        </div>
                        <div className="user_info">
                            <label htmlFor="">
                                <p>用户名<span>*</span></p>
                                <input type="text" className="username" onInput={this.shuruInfo.bind(this,"username")}  ref={this.inputUsername}/><br/>
                            </label>
                            <label htmlFor="">
                                <p>密码<span>*</span></p>
                                <input type="password" className="password" onInput={this.shuruInfo.bind(this,"userpassword")} ref={this.inputPassword}/>
                            </label>
                            <p><span onClick={this.updataPassword.bind(this)}>忘记密码</span></p>

                            <input type="checkbox" className="check" ref="check"/> &nbsp;&nbsp;
                            记住密码
                            <br/>
                            <div className="btn_login">
                            <button onClick={this.userLogin.bind(this)}>登录</button>
                            </div>
                            <p className="go_regist">还不是YAGE 的用户? <span onClick={this.jumpRouter.bind(this)}>点击在此注册</span></p>
                        </div>
                    </div>
                    </SLogin>
                <Footer></Footer>
            </div>
        )
    }
}
